{% extends "object_reference/base.html" %}

{# subtopic_name should match string in nav.html #}
{% set subtopic_name = 'Secure/Indirect' %}

{% block javascript %}
{{ super() }}

var do_ajax_request = function(url, result_store) {   
    $.ajax({
        url: url,
        success: function(result) {
            $(result_store).html(result).stop(true)
            
            if (result.indexOf("Access denied") >= 0) {
                $(result_store).css({backgroundColor: '#FF2640'}).animate({backgroundColor: '#FFB8C0'}, 2000); 
            } else {
                $(result_store).css({backgroundColor: '#ff0'}).animate({backgroundColor: '#fff'}, 2000); 
            }
        }
    });
};

{% endblock javascript %}

{% block content %}

<p>Pretend you have the following links to user profiles:</p>
<ul>
{% for username in known_usernames %}<li><a class="known_username" href="{{ ajax_target }}?key={{ username[1] }}">{{ username[0] }}</a></li>{% endfor %}
</ul>

<p>Even though these are the same users that are on the insecure page, the server-side objects are masked by a random key string. This makes it extremely difficult to guess new parameter values.</p>

<form id="ajax_form" action="#">
<p>Request: <input id="ajax_request" class="url_input"></p>
<p><input id="ajax_request_button" type="Submit" value="Submit Request"></p>
</form>

Request Response:<br>
<p id="ajax_result">Click on a username above to display their profile</p>

{% endblock content %}
